<template>
	<view class="content">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="head_title">
				本小家共有{{waitWordcount}}个多意词
			</view>
			<view class="flex items-center flex-center">
				<view class="line_progress">
					<up-line-progress :percentage="Math.ceil((num/waitWordcount)*100)" :showText="false"
						activeColor='#51D580' inactiveColor='#EBEBEB' height="8rpx"></up-line-progress>
				</view>
				<view class="line_num">
					{{num}}/{{waitWordcount}}
				</view>
			</view>
			<view class="box">
				<view class="box_title flex items-center flex-center">
					{{wordHead}}
					<image src="../../static/play-icon.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="flex flex-wrap">
					<view class="box_list u-line-1 text-center" v-for="(i,v) in tran" :key="v"
						:class="current==v?'hover_list':''" @click="hoverClick(i,v)">
						{{i.transtr}}
					</view>
				</view>
			</view>
			<view class="pos">
				<view class="warn flex items-center flex-center">
					<image src="../../static/alarm-icon.png" mode="" class="warn_img"></image>
					<view class="warn_title">
						给单词起个名字，选择一个您喜欢的
					</view>
				</view>
				<!-- <view class="btn" @click="nextClick()">
					继续
				</view> -->
			</view>
		</page-container>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					坚持就是胜利！若您要坚持退出 下次记忆将接着此次记录继续
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						退出
					</view>
					<view class="popup_sure" @click="confirm">
						继续学习
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="successShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					哇，我已经知道你给单词起的名字了，你也去看看吧！
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">

					<view class="popup_see" @click="seeClick()">
						去看看
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const percentage = ref(10)
	const current = ref(-1)
	const show = ref(false)
	const isShowPage = ref(true)
	const successShow = ref(false)
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const getRemWordListApi = inject('getRemWordList')
	const updateWordScnaApi = inject('updateWordScn')
	const list = ref([])
	const num = ref(1)
	const waitWordcount = ref(0)
	const tran = ref([])
	const wordHead = ref('')
	const id = ref('')
	const tranName = ref('')
	const pos = ref('')
	const item = ref({})
	const region_num=ref(0)
	const innerAudioContext = uni.createInnerAudioContext();
	onLoad((op) => {
		console.log(op)
		page.value = op.page
		big_sort.value = op.big_sort
		small_sort.value = op.small_sort
		region_num.value = op.region_num
		getRemWordListApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value
		}).then(res => {
			console.log(res, 106)
			list.value = res.waitWordList
			waitWordcount.value = res.waitWordcount
			wordHead.value = res.waitWordList[0].wordHead
			tran.value = res.waitWordList[0].tran
			id.value = res.waitWordList[0].id
			innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${wordHead.value}&type=1`;
			innerAudioContext.play();
		})

	})
	const hoverClick = (i, v) => {
		current.value = v
		tranName.value = i.tranCn
		console.log(i,8888888888888)
		pos.value = i.pos
		nextClick()
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const seeClick = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/wordArea?page=' + page.value + "&small_sort=" + small_sort.value +
				'&big_sort=' + big_sort.value+'&region_num='+region_num.value
		})
	}

	const confirm = () => {
		isShowPage.value = true
		show.value = false
	}
	const nextClick = () => {
		if(tranName.value!=''){
			updateWordScnaApi({
				id: id.value,
				tran: tranName.value,
				pos: pos.value
			
			}).then(res => {
				console.log(res, 106)
				num.value++
				tranName.value=''
				if (num.value <= waitWordcount.value) {
					wordHead.value = list.value[num.value - 1].wordHead
					innerAudioContext.stop();
					innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${wordHead.value}&type=1`;
					innerAudioContext.play();
					tran.value = list.value[num.value - 1].tran
					id.value = list.value[num.value - 1].id
					current.value = -1
				} else {
					successShow.value = true
					console.log('进不来吗？', successShow.value)
					num.value = waitWordcount.value
				}
			})
		}else{
			uni.showToast({
				title:"请选择意思",
				icon:'none'
			})
		}
	
	}

	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.head_title {
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding: 40rpx 0 32rpx 0;
		}

		.line_progress {
			width: 598rpx;
			height: 8rpx;
			background: #EBEBEB;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

		.line_num {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #51D580;
			margin-left: 40rpx;
		}

		.box {
			padding: 32rpx;

			.box_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 60rpx;
				color: #333333;
				line-height: 70rpx;
				text-align: center;
				padding: 100rpx 0;
			}

			.box_list {
				width: 196rpx;
				padding: 0 10rpx;
				height: 100rpx;
				background: #EBEBEB;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				line-height: 100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-right: 8rpx;
				margin-bottom: 20rpx;
			}

			.hover_list {
				background: #51D580;
				color: #FFFFFF;
			}
		}

		.pos {
			position: fixed;
			bottom: 36rpx;
			left: 24rpx;

			.warn {
				padding-bottom: 24rpx;

				.warn_img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.warn_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.btn {
				width: 702rpx;
				height: 104rpx;
				background: #51D580;
				border-radius: 92rpx 92rpx 92rpx 92rpx;
				line-height: 104rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.popup_bg {
			width: 610rpx;
			height: 500rpx;
			background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
			background-size: 100% 100%;

			.popup_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 52rpx;
				color: #FFFFFF;
				text-align: center;
				padding-top: 20rpx;
			}

			.popup_pro {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				width: 504rpx;
				height: 100rpx;
				margin: 120rpx auto 0;
			}

			.popup_cancel {
				width: 252rpx;
				height: 92rpx;
				background: #CCCCCC;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				text-align: center;
				line-height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.popup_sure {
				width: 252rpx;
				height: 92rpx;
				background: #51D580;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.popup_see {
				width: 526rpx;
				height: 92rpx;
				background: #51D580;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				text-align: center;
				line-height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

		}
	}
</style>